<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="" type="text/css" />
    <title>Document</title>
</head>

<body>
    <table>
        <tr>
            <td>url：</td>
            <td><input type="url" /></td>
        </tr>
        <tr>
            <td>color：</td>
            <td><input type="color" /></td>
        </tr>
        <tr>
            <td>date：</td>
            <td><input type="date" /></td>
        </tr>
        <tr>
            <td>datetime：</td>
            <td><input type="datetime-local" /></td>
        </tr>
        <tr>
            <td>file：</td>
            <td><input type="file" /></td>
        </tr>
        <tr>
            <td>checkbox：</td>
            <td><input type="checkbox" disabled/></td>
        </tr>
        <tr>
            <td>radio：</td>
            <td><input type="radio" /></td>
        </tr>
        <tr>
            <td>button：</td>
            <td><input type="button" value="button" id="btn" /></td>
        </tr>
        <tr>
            <td>button：</td>
            <td><input type="number" /></td>
        </tr>
    </table>
</body>
<style>
    input[type='checkbox'] {
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        position: relative;
        font-size: 16px;
        line-height: 16px;
        border: 2px solid #007acc;
        border-radius: 4px;
        appearance: none;
    }

    input[type='checkbox']:checked::after {
        position: absolute;
        color: #007acc;
        font-weight: bold;
        width: 16px;
        height: 16px;
        display: inline-block;
        text-align: center;
        content: "✓";
    }
</style>

</html>